<template>
  <a-modal
    title="任期增减筛选"
    :width="700"
    :visible="visible"
    :maskClosable="false"
    :footer="null"
    @cancel="handleCancel"
  >
    <div class="table-page-search-wrapper" style="margin-top: 20px">
      <a-form-model :model="projectItem" :label-col="labelCol" :wrapper-col="wrapperCol">
        <!-- 资产负债率 -->
        <a-row>
          <a-form-model-item label="资产负债率">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>增幅：</span>
                <a-input v-model="projectItem.zcfzlZf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('zcfzlZf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('zcfzlZf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
              <a-col span="11" class="item_line">
                <span>降幅：</span>
                <a-input v-model="projectItem.zcfzlJf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('zcfzlJf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('zcfzlJf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-row>
        <!-- 年应收客户合同工程款 -->
        <a-row>
          <a-form-model-item label="年应收客户合同工程款">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>增幅：</span>
                <a-input v-model="projectItem.htgckZf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('htgckZf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('htgckZf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
              <a-col span="11" class="item_line">
                <span>降幅：</span>
                <a-input v-model="projectItem.htgckJf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('htgckJf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('htgckJf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-row>
        <!-- 营业收入 -->
        <a-row>
          <a-form-model-item label="营业收入">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>增幅：</span>
                <a-input v-model="projectItem.yysrZf" class="addandsub_input">
                  <a-button slot="addonAfter" class="btn_addandsub" @click="addNumber('yysrZf')" icon="plus"></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('yysrZf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
              <a-col span="11" class="item_line">
                <span>降幅：</span>
                <a-input v-model="projectItem.yysrJf" class="addandsub_input">
                  <a-button slot="addonAfter" class="btn_addandsub" @click="addNumber('yysrJf')" icon="plus"></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('yysrJf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-row>
        <!-- 年度经营性有息负债增 -->
        <a-row>
          <a-form-model-item label="年度经营性有息负债增">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>增幅：</span>
                <a-input v-model="projectItem.ndjyxyxfzZf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('ndjyxyxfzZf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('ndjyxyxfzZf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
              <a-col span="11" class="item_line">
                <span>降幅：</span>
                <a-input v-model="projectItem.ndjyxyxfzJf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('ndjyxyxfzJf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('ndjyxyxfzJf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-row>
        <!-- 新签合同额增 -->
        <a-row>
          <a-form-model-item label="新签合同额增">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>增幅：</span>
                <a-input v-model="projectItem.xqhteZf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('xqhteZf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('xqhteZf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
              <a-col span="11" class="item_line">
                <span>降幅：</span>
                <a-input v-model="projectItem.xqhteJf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('xqhteJf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('xqhteJf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;%</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-row>
        <!-- 经营活动现金净流量 -->
        <a-row>
          <a-form-model-item label="经营活动现金净流量">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>增幅：</span>
                <a-input v-model="projectItem.jyhdxjjllZf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('jyhdxjjllZf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('jyhdxjjllZf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;万元</span>
              </a-col>
              <a-col span="11" class="item_line">
                <span>降幅：</span>
                <a-input v-model="projectItem.jyhdxjjllJf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('jyhdxjjllJf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('jyhdxjjllJf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;万元</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-row>
        <!-- 投资活动现金净流量 -->
        <a-row>
          <a-form-model-item label="投资活动现金净流量">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>增幅：</span>
                <a-input v-model="projectItem.tzhdxjjllZf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('tzhdxjjllZf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('tzhdxjjllZf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;万元</span>
              </a-col>
              <a-col span="11" class="item_line">
                <span>降幅：</span>
                <a-input v-model="projectItem.tzhdxjjllJf" class="addandsub_input">
                  <a-button
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('tzhdxjjllJf')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('tzhdxjjllJf')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>&nbsp;万元</span>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-row>
      </a-form-model>
    </div>
    <a-row :gutter="24">
      <a-col :span="8" :offset="8">
        <div class="btn_position">
          <a-button type="primary" @click="save">保存</a-button>
          <a-button @click="handleCancel" style="margin-left: 20px">取消</a-button>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
export default {
  name: 'ItemsOfIndicator',
  data() {
    return {
      visible: false,
      projectItem: {},
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    }
  },
  methods: {
    save() {
      let projectJson = JSON.stringify(this.projectItem)
      this.$emit('save', projectJson)
      this.visible = false
    },
    edit(projectItem) {
      this.projectItem = projectItem
      console.log(this.projectItem)
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    addNumber(mysite) {
      this.projectItem[mysite]++
    },
    subNumber(mysite) {
      this.projectItem[mysite]--
    },
  },
}
</script>

<style lang="less" scoped>
.btn_position {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item_line {
  display: flex;
  align-items: center;
}
.addandsub_input {
  width: 130px;
  /deep/ .ant-input-group-addon {
    padding: 0;
  }
  /deep/ .ant-input-group {
    width: 125px;
  }
  .btn_addandsub {
    height: 30px;
    width: 25px;
    padding: 0;
    border-color: #f9f9f9;
    background-color: #f9f9f9;
    .add {
    }
  }
}
</style>